<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="admin/head :: head"></div>

    <title>作品列表</title>

    <!-- jquery.pagination -->
    <script th:src="${#request.getAttribute('ctx') + '/static/common/jquery.pagination/jquery.pagination.js'}"></script>


</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a th:href="@{/admin}">首页</a>
        <a>
          <cite>作品列表</cite>
        </a>
      </span>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" th:action="@{/admin/video/list}" method="post" id="searchForm">
            <input type="text" name="id" th:value="${video.id}" placeholder="请输入作品编号" autocomplete="off" class="layui-input">
            <input type="text" name="name" th:value="${video.name}" placeholder="请输入作品名称" autocomplete="off" class="layui-input">

            <div class="layui-input-inline">
                <select name="type">
                    <option value="">请选择作品类型</option>
                    <option th:each="item:${dictionaries}" th:value="${item.value}" th:text="${item.name}" th:selected="${video ne null and video.type eq item.value}"> </option>
                </select>
            </div>
            
            <div class="layui-input-inline">
                <select name="filtrates">
                    <option value="">请选择作品显示位置</option>
                    <option value="1" th:selected="${video.filtrates ne null and video.filtrates.length > 0 and video.filtrates[0] eq 1}">
                        首页
                    </option>
                </select>
            </div>
            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <xblock>
        <button class="layui-btn layui-btn-danger" onclick="del('/admin/video/delete/')"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" id="refresh">重置指定作品</button>
        <button class="layui-btn" onclick="x_admin_show('添加作品','/admin/video/form')"><i class="layui-icon"></i>添加</button>
        <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon">ဂ</i>
        </a>
        <span class="x-right" style="line-height:40px" th:text="|共有数据: ${page.total} 条|"></span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <div class="layui-unselect header layui-form-checkbox" lay-skin="primary">
                    <i class="layui-icon">&#xe605;</i>
                </div>
            </th>
            <th>作品编号</th>
            <th>作品名称</th>
            <th>工作/婚恋</th>
            <th>播放/点赞/收藏(点击相应图标修改)</th>
            <th>创建时间</th>
            <th>排序</th>
            <th>首页显示</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item:${page.list}">
            <td>
                <div class="layui-unselect layui-form-checkbox" lay-skin="primary" th:attr="data-id=${item.id}">
                    <i class="layui-icon">&#xe605;</i>
                </div>
            </td>
            <td th:utext="${item.id}"></td>
            <td th:text="${item.name}"></td>
            <td cus:dict="video-type, ${item.type}"></td>
            <td class="video-operations" th:attr="data-item-id=${item.id}" th:utext="'<span class=\'layui-badge-rim\'>'
                + ${item.count} + '</span> / <span class=\'layui-badge\'>'
                + ${item.likeCount} + '</span> / <span class=\'layui-badge layui-bg-orange\'>'
                + ${item.collectCount} + '</span>'">
            </td>
            <td th:text="${#dates.format(item.createDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
            <td th:text="${item.order}"></td>
            <td>
                <form class="layui-form">
                    <input type="checkbox" lay-filter="change" lay-skin="switch"
                           th:checked="${item.filtrate ne null and item.filtrate.indexOf('1') > -1}"
                           th:value="${item.filtrate}" th:attr="id=${item.id}">
                </form>
            </td>
            <td class="td-manage">
                <a title="查看" th:onclick="'x_admin_show(\'编辑\',\'/admin/video/form?id=' + ${item.id} + '\')'"
                   href="javascript:;">
                    <i class="layui-icon">&#xe63c;</i>
                </a>
                <a title="删除" th:onclick="'del(\'/admin/video/delete/\', ' + ${item.id} + ')'" href="javascript:;">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="page">
        <div class="page-box"></div>
    </div>

</div>
<script th:inline="javascript">
    $('.page-box').pagination({
        totalData: [[${page.total}]],
        showData: [[${page.pageSize}]],
        current: [[${page.pageNum}]],
        pageCount: [[${page.pages}]],
        coping: true,
        keepShowPN: true,
        callback: function (index) {
            $('#searchForm').attr('action', location.href.substring(0, location.href.indexOf('?') < 0 ? location.href.length : location.href.indexOf('?')) + "?pageNum=" + index.getCurrent() + "&pageSize=[[${page.pageSize}]]");
            $('#searchForm').submit();
        }
    });

    $('#refresh').click(function () {
        var id = tableCheck.getData();
        if (id == undefined || id == null || id.length == 0) {
            layer.msg('请选择要重置的作品', {icon: 1, time: 3000});
            return false;
        }
        $.ajax({
            type: 'get',
            url: '/admin/video/refresh/' + id,
            async: false,
            dataType: 'json',
            success: function (result) {
                if (result) {
                    layer.msg(Messages.SUCCESS, {icon: 1, time: 3000});
                } else {
                    layer.msg(Messages.ERROR, {icon: 1, time: 3000});
                }
            }
        })
    })

    $('.video-operations').click(function () {
        var id = $(this).attr('data-item-id');
        layer.open({
            title: '播放/点赞/收藏',
            content: '播放: <input name="count" value=""><br> 点赞: <input name="likeCount" value=""><br> 收藏: <input name="collectCount" value="">',
            yes: function (index, layero) {
                $.ajax({
                    url: '/admin/video/api/count',
                    type: 'post',
                    data: {
                        id: id,
                        count: layero.find('input[name="count"]').val(),
                        likeCount: layero.find('input[name="likeCount"]').val(),
                        collectCount: layero.find('input[name="collectCount"]').val()
                    },
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                    },
                    dataType: 'json',
                    success: function (result) {
                        if (result.data == Messages.TOF.TRUE) {
                            Messages.TIP.msg(Messages.SUCCESS);
                            layer.close(index);
                        } else {
                            Messages.TIP.error(result.error)
                            return false;
                        }
                    },
                    error: function (e) {
                        Messages.TIP.error(Messages.ERROR);
                    }
                })

            }
        })
    })

    layui.use('form', function () {
        var form = layui.form;

        form.on('submit(search)', function (data) {
            this.submit();
        })

        /**
         * 改变首页显示设置
         */
        form.on('switch(change)', function (data) {
            var self = this;
            self.excute = function (id, filtrate) {
                $.ajax({
                    type: 'post',
                    url: '/admin/video/change_show',
                    data: {
                        id: id,
                        filtrate: filtrate
                    },
                    dataType: 'json',
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
                        self.disabled = true;
                    },
                    success: function (result) {
                        if (result.status == 200) {
                            Messages.TIP.msg(Messages.SUCCESS);
                        } else {
                            Messages.TIP.error(result.error)
                            return false;
                        }
                    },
                    error: function (e) {
                        layer.alert(Messages.ERROR, {icon: 1});
                    }
                })
                self.disabled = false;
            }

            var id = $(self).attr('id');
            var filtrate = self.value;

            if (self.checked) {
                if (filtrate != null && filtrate != '') {
                    if (filtrate.indexOf('1') > -1) {
                        return false;
                    } else {
                        let arr = new Array();
                        arr.push(1);
                        for (var i in filtrate.split(',')) {
                            arr.push(filtrate.split(',')[i]);
                        }
                        self.value = arr.toString();
                        self.excute(id, arr.toString());
                        return true;
                    }
                } else {
                    let arr = new Array();
                    arr.push(1);
                    self.value = arr.toString();
                    self.excute(id, arr.toString());
                    return true;
                }
            } else {
                if (filtrate != null && filtrate != '') {
                    if (filtrate.indexOf('1') > -1) {
                        let arr = new Array();
                        for (var i in filtrate.split(',')) {
                            if (filtrate.split(',')[i] != '1') {
                                arr.push(filtrate.split(',')[i]);
                            }
                        }
                        self.value = arr.toString();
                        self.excute(id, arr.toString());
                        return true;
                    } else {
                        return true;
                    }

                } else {
                    return true;
                }
            }
        })

        form.on('span(count)', function (data) {
            console.log(data)
        })
    });

</script>
</body>

</html>